<template>
    <div>
        <el-row class="rljxViewBox">
          <el-col :xl="8" :sm="8" :lg="8" :md="8">
              <chart-lay-out>
                  <span slot="title">KPI绩效管理指标概况 ({{proportionList.statisticalTime}})</span>
                  <div slot="main" style="margin-left:40px">
                    <div>
                      <table class="gridtable">
                        <tr>
                          <th class="dyFirstColumn">单位</th>
                          <th class="dyFirstColumn">考核人数</th>
                          <th class="dyFirstColumn">考核覆盖率</th>
                          <th class="dyFirstColumn">平均分值</th>
                        </tr>
                      </table>
                    </div>
                    <div class="top10Scroll" style="height:230px">
                      <table class="gridtable">
                        <tr v-if="proportionList.reList.length >= 1" v-for="(item, index) in proportionList.reList" :key="index">
                          <td class="dyFirstColumn">{{item.name}}</td>
                          <td class="dyFirstColumn">{{item.assessmentNum}}</td>
                          <td class="dyFirstColumn">{{item.assessmentCoverage}}%</td>
                          <td class="dyFirstColumn">{{item.averageScore}}</td>
                        </tr>
                        <div v-else class="tableNoData">暂无数据</div>
                      </table>
                    </div>
                  </div>
              </chart-lay-out>
          </el-col>
          <el-col :xl="16" :sm="16" :lg="16" :md="16">
              <chart-lay-out :showLine="false" :showTitle="false">
                  <!-- <span slot="title">工程进度(三期)</span> -->
                  <div slot="main" style="margin-right: 20px">
                    <bar-charts style="margin-top: 50px" v-model="projectProgressArr" :option="myOption"></bar-charts>
                  </div>
              </chart-lay-out>
          </el-col>
        </el-row>
        <el-row class="rljxBottomBox">
          <el-col :xl="8" :sm="8" :lg="8" :md="8">
              <chart-lay-out>
                  <span slot="title">KPI管理指标趋势(人)</span>
                  <div slot="identi" style="text-align:left">
                    <p style="margin-left: 54px">滑动右边视图的标尺来切换月份</p>
                  </div>
                  <div slot="main">
                    <pie-chart v-model="stockAnalysisArr" :option="stockAnalysisOption"></pie-chart>
                  </div>
              </chart-lay-out>
          </el-col>
          <el-col :xl="16" :sm="16" :lg="16" :md="16">
              <chart-lay-out :showLine="false" :showTitle="false">
                  <div slot="main" style="margin-right: 20px">
                    <line-chartss style="margin-top: 50px" v-model="managementIndexArr" :option="myLinesOption" @chartHoverData="changeChart"></line-chartss>
                  </div>
              </chart-lay-out>
          </el-col>
        </el-row>
    </div>
</template>
<script>
import barCharts from "@/components/Charts/barCharts";
import pieChart from "@/components/Charts/pieChart";
import lineChartss from "@/components/Charts/lineChartss";
import bgLayOut from "@/components/bgLayOut/index";
import chartLayOut from "@/components/Charts/chartLayOut";
import {
  GetHumanPerformanceData,
  GetDoubleDetailList,
  GetDataByDoubleTargetForTwo
} from "@/api/rl/index";
export default {
  name: "sellAnalysis",
  components: {
    bgLayOut,
    barCharts,
    pieChart,
    lineChartss,
    chartLayOut
  },
  data() {
    return {
      projectProgressArr: [], // 双项指标统计(绩效)
      stockAnalysisArr: [], // KPI绩效管理指标概况
      stockAnalysisOption: {
        hoverPosion: "center"
      },
      managementIndexArr: [], // KPI绩效管理指标概况(折线)
      myOption: {
        showLabel: true,
        grid: { bottom: "20%", left: "6%" },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        }
      },
      myLinesOption: {
        grid: { bottom: "20%", left: "6%" },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0
          },
          axisPointer: {
            show: true,
            value: "2017-07",
            snap: true,
            lineStyle: {
              color: "#2ff0d2",
              opacity: 0.5,
              width: 2
            },
            handle: {
              show: true,
              margin: 40,
              size: 30,
              color: "#2ff0d2"
            }
          }
        },
        tooltip: {
          show: true,
          axisPointer: {
            type: "line"
          }
        },
        hideLineColor: true,
        showSymbol: "none",
        color: ["#F0BF24", "#00D0FE"],
        showLabel: true,
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "rgba(40,231,135,0.5)",
        endColor: "rgba(40,231,135,0.1)"
      },
      proportionList: [] // 表格数据
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    changeChart(res, params) {
      var dataIndex = params[0].dataIndex;
      var hoverData = res[dataIndex];
      var isNull = false;
      for (var i = 0; i < hoverData.list.length; i++) {
        if (hoverData.list[i].value !== 0) {
          isNull = true;
        }
      }
      if (isNull) {
        this.$set(this, "stockAnalysisArr", hoverData.list);
      } else {
        this.$set(this, "stockAnalysisArr", []);
      }
    },
    // 获取人力绩效管理指标概况
    async fetchProportionList() {
      try {
        var res = await GetHumanPerformanceData();
        if (res.data.code === "0") {
          const result = res.data.result;
          this.$set(this, "proportionList", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 双项指标统计(绩效)
    async fetchProjectProgressArr() {
      try {
        const params = {
          queryType: "10017"
        };
        const res = await GetDataByDoubleTargetForTwo(params);
        if (res.data.code === "0") {
          const result = res.data.result;
          this.$set(this, "projectProgressArr", result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // KPI绩效管理指标概况
    async fetchStockAna() {
      try {
        const params = {
          queryType: "10017"
        };
        var res = await GetDoubleDetailList(params);
        if (res.data.code === "0") {
          const result = res.data.result;
          this.$set(this, "managementIndexArr", result);
          console.log(this.managementIndexArr);
          this.$set(
            this.myLinesOption.xAxis.axisPointer,
            "value",
            result[0].xData1
          );
          this.$set(this, "stockAnalysisArr", result[10].list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    fetchData() {
      this.fetchStockAna(); // KPI绩效管理指标概况
      this.fetchProjectProgressArr(); // 双项指标统计(绩效)
      this.fetchProportionList(); // 获取人力绩效管理指标概况
    }
  }
};
</script>
<style lang="scss">
@import "../../../../styles/element-ui/radioBtn/radioBtnBlue.scss";
</style>

<style scoped lang="scss">
@import "../../../../styles/base/_parameters";
.rljxViewBox {
  text-align: center;
  margin: 40px 0px 20px;
  @include moduleBg(bg_1813x393);
  color: #2ff0d2;
}
.rljxBottomBox {
  text-align: center;
  @include moduleBg(bg_1813x393);
  color: #2ff0d2;
}
.top10Scroll {
  overflow-y: scroll;
}
.tableNoData {
  display: table-cell;
  padding-top: 20px;
  color: #ccc;
  text-align: center;
}
table.gridtable {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  color: white;
  font-size: 16px;
  overflow-y: scroll;
}
table.gridtable th {
  height: 40px;
  padding: 8px;
  /* border-right: 1px solid rgba(47, 240, 210, 0.3) ; */
  /* background: rgba($color: #00d1ff, $alpha: 0.2); */
  color: #2ff0d2;
  background-color: rgba(#00d1ff, 0.2);
}
table.gridtable th:last-child {
  border-right: none;
}
table.gridtable td {
  height: 36px;
  padding: 8px;
  border-right: 1px solid rgba(49, 206, 230, 0.2);
  background-color: rgba(0, 0, 0, 0);
  color: #00d1ff;
}
table.gridtable td:last-child {
  border-right: none;
}
table.gridtable .firstColumn {
  width: 20%;
  text-align: center;
}
table.gridtable .secondColumn {
  width: 50%;
  text-align: left;
}
table.gridtable .flexTd {
  width: 100%;
  display: flex;
  align-items: center;
  float: left;
}
.flexTdLeft {
  display: inline-block;
  text-align: right;
  margin-left: 10px;
}
table.gridtable .dyFirstColumn {
  width: 25%;
  text-align: center;
}
</style>
